// 后台首页模块
import React, { useEffect } from 'react'
import TopGroup from './topgroup/topgroup'
import SystemInfo from './systeminfo/systeminfo'
import MoneyAccessChart from './capitalflow/capitalflow'
import { connect } from 'react-redux'
import { ThunkDispatch } from 'redux-thunk'
import { AnyAction } from 'redux'
import { getSystemInfo } from '../../../store/actions/system'
import { StoreState } from '../../../store'

const mapStateToProps = ({ system }: StoreState) => ({ system })

type ThunkDispatchType = ThunkDispatch<{}, {}, AnyAction>
type Props = ReturnType<typeof mapStateToProps> & {
  dispatch: ThunkDispatchType
}

const HomeIndex: React.FC<Props> = function ({ system, dispatch }: Props) {
  useEffect(() => {
    dispatch(getSystemInfo())
  }, [])
  return (
    <div className="home-index oya">
      <TopGroup />
      <SystemInfo systemInfo={system.info} />
      <MoneyAccessChart />
    </div>
  )
}

export default connect(mapStateToProps)(HomeIndex)
